<template>
  <div>
    <!-- 暂时隐藏优先级 -->
    <el-row type="flex" justify="end" style="height: 40px; display: none">
      <el-col :span="12">
        <span style="font-size: 14px">优先级</span>
        <el-select v-model="priority" size="mini" style="width:100px" @change="changePriority">
          <!-- 优先级 -->
          <el-option v-for="item in leavels" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-col>
    </el-row>
    <!-- 组件 -->
    <el-card v-for="(item, index) in conditions" :key="index" class="condition">
      <el-row style="height:40px" type="flex" align="middle" justify="space-between">
        <!-- <el-col :span="10">
          <el-select v-model="item.type" size="mini" placeholder="条件类型" @change="changeType($event, index)"> -->
        <!-- 常规条件 -->
        <!-- <el-option v-for="option in conditionType" :key="option.value" :value="option.value" :label="option.label" />
          </el-select>
        </el-col> -->
        <el-col :span="2">
          <el-tooltip effect="light">
            <img slot="content" :src="exampleImg" alt="">
            <i
              class="el-icon-question"
              style="color:#999"
            />
          </el-tooltip>

        </el-col>
      </el-row>
      <template v-if="item.type==='normal'">

        <el-row style="height:40px" type="flex" align="middle">
          <!-- 条件 -->
          <!-- <el-col :span="4" /> -->
          <el-col :span="8">
            <el-select v-model="item.options.leftVaribale" size="mini" placeholder="变量" style="width:100px">
              <!-- 常规条件 -->
              <el-option v-for="option in varibales" :key="option.fieldKey" :value="option.fieldKey" :label="option.name" />
            </el-select>
          </el-col>
          <!-- 条件 -->
          <el-col :span="4" />
          <el-col :span="8">
            <el-select v-model="item.options.operate" size="mini" style="width:100px" placeholder="操作符">
              <!-- 常规条件 -->
              <el-option v-for="option in operateType" :key="option.value" :value="option.value" :label="option.label" />
            </el-select>
          </el-col>
          <!-- 条件 -->
          <el-col :span="4" />
          <select-constant :value-variable="item.options.valueVariable" :update-index="index" @updateValue="updateValue" />
        </el-row>
        <el-row style="height:40px;" type="flex" align="middle" justify="end">
          <!-- 条件 -->
          <el-col :span="10">
            <el-select v-model="item.options.lastJoin" size="mini" placeholder="连接类型">
              <!-- 常规条件 -->
              <el-option v-for="option in joinType" :key="option.value" :value="option.value" :label="option.label" />
            </el-select>
          </el-col>
        </el-row>
      </template>

    </el-card>
    <el-row type="flex" justify="end">
      <el-button size="small" icon="el-icon-plus" circle type="primary" @click="btnAdd" />
      <el-button size="small" icon="el-icon-minus" circle type="danger" @click="btnCut" />
    </el-row>
  </div>
</template>

<script>
import SelectConstant from './select-contant'
import { conditionType, joinType, operateType } from '@/constant/normalData'
import { getCusromConfigList } from '@/api/approval'
export default {
  components: {
    SelectConstant
  },
  data() {
    return {
      exampleImg: require('@/assets/example.png'),
      // 两种条件设计 一种普通条件 一种业务条件
      // normal 常规条件 business  业务条件
      conditions: [],
      leavels: [], // 层级
      priority: null, // 优先级
      conditionType,
      joinType,
      operateType,
      varibales: [] // 变量数组  此数组应该来源于数据库维护表
    }
  },
  watch: {
    conditions: {
      deep: true,
      handler(newValue) {
        // 当条件内容发生变化 触发 条件节点的显示和数据存储
        this.$emit('conditionChange', newValue)
      }
    }
  },
  created() {
    this.getCusromConfigList() // 获取自定义变量
  },
  methods: {
    // 获取列表字段
    async getCusromConfigList() {
      const { records } = await getCusromConfigList({ current: 1, size: 1000 })
      this.varibales = records
    },
    // 添加
    btnAdd() {
      this.conditions.push({
        type: 'normal',
        options: {
          lastJoin: '', // 上一个连接符
          leftVaribale: '', // 左变量
          operate: '', // 操作符
          valueVariable: '' // 值
        }
      })
    },
    // 删除
    btnCut() {
      !this.conditions.length || this.conditions.pop()
    },
    // 切换类型和值
    changeType(value, index) {

    },
    // 更新右侧属性值
    updateValue(value, index) {
      const obj = this.conditions.find((v, i) => i === index)
      // 更新某个值
      if (obj) {
        this.conditions.splice(index, 1, { ...obj, options: { ...obj.options, valueVariable: value }})
      }
    },
    // 改变优先级
    changePriority() {
      // 优先级改变事件
      this.$emit('priorityChange', this.priority)
    }
  }
}
</script>

<style scoped>
  .title {
    font-size: 12px;
    color: #999;
  }
  .condition {
    margin: 10px 0
  }
</style>
